<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日例会</title>
    <% include ../../layouts/import.ejs %>
</head>
<body>
<% include ../../layouts/header.ejs %>
<div class="index container" style="background: white;">
    <div class="row">
        <div class="col-lg-6">
            <h2>日例会</h2>
        </div>
        <div class="col-lg-3">
            <div class="checkbox" style="margin-top: 25px;text-align: right;">
                <label for="isLeader"><input type="checkbox" id="isLeader" value="false"/>团队视图</label>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="input-group" style="margin-top: 18px;">
                <input type="text" class="form-control" value="" id="datetimepicker">
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>
        </div>
    </div>


    <div class="daily-container" id="dailyContainer">
    </div>

    <!--<div class="daily-week-form">-->
    <!--<div class="container">-->
    <!--<textarea type="text" class="form-control daily-week-form-input" rows="3"-->
    <!--placeholder="输入格式：项目code 任务名称 指派给（loginName） 备注" id="taskContent">hyqaq 测试任务 user 好好</textarea>-->
    <!--</div>-->
    <!--</div>-->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" style="width: 900px ;" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('#datetimepicker').datetimepicker({
            format: 'yyyy-mm-dd',
            weekStart: 1,
            minView: 2,
            todayBtn: true,
            autoclose: true,
            todayHighlight: true,
            language: 'zh-CN'
        }).on('changeDate', function (ev) {
            loadData();
        });

        loadData();

        //是否团队数据
        $('#isLeader').click(function () {
            loadData()
        });

        //进度弹窗，使用on 3个参数可以绑定ajax后来添加的元素
        $(document).on('mouseenter', '.processBtn', function () {
            var $this = this;
            var taskId = $(this).attr('data-task-id');
            $.get('/daily/day/listAll/' + taskId, function (result) {
                console.log(result);
                var options = {
                    title: '进度',
                    html: true,
                    content: result
                };
                $($this).popover(options)
                $($this).popover('show');
            })
        }).on('mouseleave', '.processBtn', function () {
            $(this).popover('hide');
        });

    });
    function loadData(isLeader) {
        var mondayTimestamp = $('#datetimepicker').datetimepicker('getDate').getTime();
        var checked = $('#isLeader').prop('checked');

        $.post('/daily/day/loadData', {isLeader: checked, selectedTimestamp: mondayTimestamp}, function (result) {
            if (result.errcode === 0) {
                var html = '';
                $.each(result.data, function (index, element) {
                    var processText = element.projectAllNum === 0 ? '0/0' : element.projectDoneNum + '/' + element.projectAllNum;
                    var processPercent = (element.projectDoneNum / element.projectAllNum) * 100;
                    html += '<div class="daily-project-container">' +
                        '<div class="daily-project-info row">' +
                        '<div class="col-lg-10">' +
                        '<span class="daily-project-name">' + element.projectName + '</span>' +
                        '<span class="daily-project-leader">负责人：' + element.projectLeaderName + '</span>' +
                        '<span class="label label-danger" style="margin-left: 10px;">紧急</span>' +
                        '</div>' +
                        '<div class="col-lg-2">' +
                        '<div class="progress">' +
                        '<div class="progress-bar" role="progressbar"' +
                        ' aria-valuenow="' + element.projectDoneNum + '" aria-valuemin="0"' +
                        ' aria-valuemax="' + element.projectAllNum + '"' +
                        ' style="width: ' + processPercent + '%;">' + processText +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="daily-task-list">';
                    $.each(element.taskList, function (ind, elm) {

                        var completeStatus = elm.completeTime ? '<span style="color: green;">完成于：' + elm.completeTime + '</span>' : '<span style="color: red;">未完成</span>';

                        html += '<div class="daily-task-info row">' +
                            '<div class="col-lg-8">' +
                            '<span class="daily-task-assignee label label-success">' + elm.assigneeName + '</span>' +
                            '<span title="' + elm.remark + ' data-toggle="modal" data-target=".bs-example-modal-sm"  href="/daily/day/listAll/' + elm.id + '">' + elm.taskName + '</span>' +
                            '<button type="button" class="btn btn-default processBtn" data-task-id="' + elm.id + '">进度</button>' +
                            '</div>' +
                            '<div class="col-lg-2">' + completeStatus + '</div>' +
                            '<div class="col-lg-2">' +
                            '<button type="button" class="daily-input-add" data-toggle="modal" data-target=".bs-example-modal-lg" href="/daily/day/inputInfo/' + elm.id + '">' +
                            '信息录入' +
                            '</button>\n' +
                            '</div>' +
                            '</div>';
                    });
                    html += '</div>' +
                        '</div>';
                });
                $('#dailyContainer').html(html);
            } else {
                console.error(result.message);
            }

        })

    }

</script>
</body>
</html>